<template>
	<view class="">
	
		<view class="body" >
			<view class="top-container no-bottom-padding">
				<uni-list :border="false" >
					<!-- <uni-list-item :border="false" title="执行者" :rightText="userInfo.name" /> -->
					<uni-list-item :border="false" title="生产任务单编号"  :rightText="header.fbillno" />
					<uni-list-item :border="false" title="父项物料编码"  :rightText="header.fmaterialnumber" />
					<uni-list-item :border="false" title="BOM版本"  :rightText="detail[0].fbomname" />
					<uni-list-item :border="false" title="数量"  :rightText="header.fqty" />
					<uni-list-item :border="false" title="日期">
						<template v-slot:footer>
							<uni-dateformat  :date="header.fdate" format="yyyy年MM月dd日">
							</uni-dateformat>
						</template>
					</uni-list-item>		
				</uni-list>
			</view>
			<template v-if="detail && detail.length > 0">
				<view class="list-pagination">
					<view class="list-pagination-inner">
						<view class="item-sticky">
							<view class="title">子项明细</view>
							<view class="extra">{{detail.length}}行</view>
						</view>
					</view>
				</view>
				<view class="" v-for="(item,index) in detail" :key = "index">
					<view class="panel" @click="openDetail(item, index)">
						<view class="panel_title">
							<view class="">{{item.fmaterialname}}</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">编码：</view>
									<view class="panel_content_row_item_value">{{ item.fmaterialnumber }}</view>
								</view>
								<!-- <view class="panel_content_row_item">
									<view class="panel_content_row_item_title">名称：</view>
									<view class="panel_content_row_item_value">{{ item.fmaterialname }}</view>
								</view> -->
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">规格：</view>
									<view class="panel_content_row_item_value">{{ item.fspecification }}</view>
								</view>
								<!-- 暂时没有材质，用单位代替 -->
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">单位：</view>
									<view class="panel_content_row_item_value">{{ item.funitname }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">应发数量：</view>
									<view class="panel_content_row_item_value">{{ item.fmustqty }}</view>
								</view>
								<!-- 暂时没有材质，用单位代替 -->
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">剩余未发数量：</view>
									<view class="panel_content_row_item_value">{{ item.fresidueqty }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-list-btn" >
						<view v-if="!item.isreplace" class="flex-list-btn-item" @click="addReplace(item)">
							子项替代
						</view>
						<view v-if="item.isreplace" class="flex-list-btn-item" @click="deleteReplace(item)">
							删除
						</view>
					</view>
				</view>
				
			</template>
			
		</view>	
		<!--  底部按钮  -->
		<view class="footerPanel">
			<view class="footerPanel_body">
				<!-- <button @click="" class="footerBtn scan" type="primary"><i
						class="iconfont icon-saomiao btn_icon"></i>扫码
				</button> -->
				<button @click="savePickMaterial" class="footerBtn save" :disabled="butClick"><i
						class="iconfont icon-duihao btn_icon" ></i>提交
				</button>
				
			</view>
		</view>
		<!-- 领料详情 -->
		<Detail ref="detailRef" ></Detail>
		<!-- 子项替代 -->
		<Replace ref="replacePop" @success="replaceSuccess" ></Replace>
</view>
</template>

<script>
	import uniTransition from 'uni_modules/uni-transition/components/uni-transition/uni-transition.vue';

	import {getMoDetail,
	getChildDetail,
	deleteReplace,
	createPickBill} from '@/utils/api.js'
	import Detail from "../pop/detail-material.vue"
	import Replace from "../pop/replace-material.vue"
	export default {
		components: {
			Detail,
			Replace
		},
		data(){
			return{
				taskBillNo: '',
				loading: true,
				header:{},
				detail:[],
				FPRDORGID :'',
				FPRDORGNAME : '',//组织名称
				materialList : [],
				butClick : false
			}
	},
	methods:{
		replaceSuccess(){
			this.initData()
		},
		//删除子项替代
		deleteReplace(item){
			uni.showModal({
				title: "提示",
				content: "是否确认删除",
				success: (result) => {
					if (result.confirm) {
						deleteReplace({id : item.id,
						fmobillno : item.fmobillno,
						fmaterialnumber : item.fmaterialnumber}).then(res =>{
							if (res.data.status == 200){
								uni.showToast({
									title:'删除成功',
									icon:'none'
								})
								this.initData()
							}
						})
						
					}
				}
			})
		},
		//添加子项替代
		addReplace(item){
			let param = {
				FPRDORGID : this.FPRDORGID,
				billNo : this.taskBillNo,
				materialNo :item.fmaterialnumber 
			}
			this.$refs.replacePop.open(param)
		},
		//保存领料单
		savePickMaterial(){
			this.butClick = true
			uni.showLoading({
				title:'正在上传数据，请稍等...',
				mask:false,
				show:true
			})
			uni.loading = false
		
			createPickBill({billNo : this.taskBillNo,
			FPRDORGID : this.FPRDORGID,
			FPRDORGNAME : this.FPRDORGNAME}).then(res => {
				if (res.data.status == 200){
					uni.showToast({
						title:'创建成功',
						icon:'none'
					})
					setTimeout(() =>{
						uni.navigateBack({
							delta:2
						})
					},1000)
				}
			})
			this.butClick = false
		},
		/**
		 * 查看子项领料详情
		 */
		openDetail(material, i) {
			
			let self = this
			getChildDetail({
				billNo : this.taskBillNo,
				materialNo : material.fmaterialnumber,
				FPRDORGID : this.FPRDORGID
			}).then(res =>{
				if (res.data.status == 200){
					self.materialList = res.data.data.dataList ?? []
					let param = {
						title: '领料详情',
						dataList: self.materialList,
						materialNo : material.fmaterialnumber,
						FPRDORGID : self.FPRDORGID,
						billNo : self.taskBillNo,
						bomId : material.id,
						material : material//子项信息(用料清单)
					}
					//self.detailIndex = i
					self.$refs.detailRef.open(param)
				}
			})
			
		},
		
		
		
		// 获取详情数据
		initData(){
			getMoDetail({billNo :this.taskBillNo }).then(res => {
				this.header = res.data.data.data
				
				this.detail = res.data.data.dataList
				this.FPRDORGNAME = res.data.data.data.fprdorgname
				this.FPRDORGID = res.data.data.data.fprdorgid
			})
		}
		
	
	},
	watch: {
		userInfo() {
			console.log(this.userInfo())
			}
		},
	onLoad(e){
		this.taskBillNo = e.taskBillNo
		//this.FPRDORGID = e.FPRDORGID
		// 获取详情数据
		this.initData()
		
	}
}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";
	/* #endif */
	
	.list-pagination {
		position: -webkit-sticky;
		/* Safari 和 iOS 版 Chrome 需要加上 -webkit- 前缀 */
		position: sticky;
		/* #ifdef APP-PLUS */
		top: 0px;
		/* #endif */
		/* #ifndef APP-PLUS */
		top: 44px;
		/* #endif */
		/* 距离父元素顶部的距离为0 */
		z-index: 1;
	
		.list-pagination-inner {
			box-sizing: border-box;
			background-color: #f8f8f8;
			
			.item-sticky {
				background-color: #fff;
				position: relative;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 12px 15px;
				padding-left: 15px;
				flex: 1;
				overflow: hidden;
				
				.title {
					font-size: 14px;
					color: #3b4144;
					overflow: hidden;
				}
	
				.extra {
					color: #999;
					font-size: 12px;
					
				}
			}
	
			.pagination {
				padding: 8px 10px;
			}
		}
	}
	.btn-item{
		width: 70px;
		
		color: $primary;
		border: 1px solid $primary;
		align-items: center;
		justify-content: center;
		padding: 0 15px;
		border-radius: 4px;
	}
</style>